<script setup name="login">
import { reactive, ref, onMounted } from "vue"
import { login } from "@/api/manager"
import { useRouter } from "vue-router"
import { setToken } from "@/composables/auth"
import { toast } from "@/composables/util"
import { User, CircleClose } from "@element-plus/icons-vue"

// 定义加载状态
const loading = ref(false)

// 实例化对象
const router = useRouter()

// 用户表单
const form = reactive({
  username: "",
  password: ""
})

// 定义校验规则
const rules = {
  username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
}

// 定响应式表单数据
const loginForm = ref(null)

// 定义登录按钮点击事件
const submit = () => {
  loginForm.value.validate(async val => {
    if (!val) return false
    try {
      // 将按钮设置为加载状态
      loading.value = true
      // 获取服务器返回的 token
      const res = await login({ ...form })
      toast("登录成功")
      // 将 token 存储至 cookie
      setToken(res.token)
      // 跳转至首页
      router.push("/")
    } catch {
      loading.value = false
    }
  })
}
// 重置表单
const resetForm = formEl => {
  if (!formEl) return
  formEl.resetFields()
}
// 监听键盘事件
onMounted(() => {
  document.onkeydown = e => {
    e = window.event || e
    if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEmter") {
      if (loading.value) return
      submit()
    }
  }
})
</script>

<template>
  <el-row class="login-container">
    <el-col :lg="16" :md="12" class="left">
      <div>
        <div class="img"></div>
        <div class="title">欢迎使用CMS后台管理系统</div>
      </div>
    </el-col>
    <el-col :lg="8" :md="12" class="right">
      <div class="login-wrapper">
        <div class="header">账号密码登录</div>
        <el-form class="form-wrapper" ref="loginForm" :rules="rules" :model="form">
          <el-form-item prop="username">
            <el-input placeholder="用户名：admin" v-model="form.username" clearable>
              <template #prefix>
                <el-icon>
                  <User />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input type="password" placeholder="密码：admin" v-model="form.password" show-password clearable>
              <template #prefix>
                <el-icon>
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <div class="login-btn">
              <el-button :icon="CircleClose" :loading="loading" @click="resetForm(loginForm)"> 重 置 </el-button>
              <el-button :icon="User" :loading="loading" @click="submit"> 登 录 </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  background-image: linear-gradient(to right, var(--bg1), var(--bg2));

  .left {
    .title {
      font-size: 28px;
      color: var(--text2);
    }

    .img {
      height: 50vh;
      background: url(@/assets/welcome.png) no-repeat bottom content-box;
      background-size: cover;
    }
  }

  .right {
    display: flex;
    justify-content: center;

    .login-wrapper {
      background-color: var(--white);
      width: 260px;
      height: 28vh;
      padding: 10px 20px;
      border-radius: 15px;
      box-shadow: -20px 20px 60px #bebebe, 20px -20px 60px #ccc;

      .header {
        color: var(--text3);
        font-size: 18px;
        margin: 20px 0;
      }

      .form-wrapper {
        .login-btn {
          display: flex;
          justify-content: space-between;
          width: 100%;
          white-space: nowrap;

          .el-button {
            width: 185px;

            &:last-child {
              background-color: var(--bg1);
              color: var(--white);
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 375px),
screen and (max-width: 414px) {
  .login-container {
    .left {
      .img {
        height: 20vh;
      }
    }
  }
}
</style>
